<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!-- 新建 -->
    <el-button type="primary" size="small" @click="dialogVisible = true"
      >新建模板</el-button
    >

    <el-dialog
      title="新建模板"
      :visible.sync="dialogVisible"
      width="30%"
      v-loading="loadingA"
      element-loading-text="正在上传中"
    >
      <div class="share_qwe">
        <img
          class="share_imgs"
          v-show="share_imgs != ''"
          :src="share_imgs"
          alt=""
        />
        <!-- 上传图片 -->
        <el-upload
          class="upload-demo"
          :before-upload="beforeUpload"
          :on-change="uploadChange"
          :action="BASEURL + '/public/img'"
          :headers="{
            Authorization: 'Bearer ' + $store.state.user.remember_token
          }"
          name="file"
          :on-success="uploaded"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <div class="share_qwe_1">
          <span>排序号</span>
          <el-input-number
            v-model="num"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="999"
          ></el-input-number>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="share_add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 列表 -->
    <template>
      <el-table
        :data="list"
        border
        style="width: 100%;margin-top: 20px;"
        align="center"
      >
        <el-table-column fixed prop="sort" label="排序号" align="center">
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img class="share_img" :src="scope.row.img" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="creator_name" label="发布人" align="center">
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at | formatDate }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="dialogVisibleUP = true" type="text" size="small"
              >编辑</el-button
            >
            -
            <el-popconfirm
              confirm-button-text="删除"
              cancel-button-text="再想想"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="share_remove(scope.row.id)"
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { BASEURL, shareList, shareRemove, shareAdd } from '../../../api'

export default {
  data() {
    return {
      BASEURL,
      loading: false,
      loadingA: false,
      list: [],
      dialogVisible: false,
      dialogVisibleUP: false,
      fileList: [],
      fileListUP: [],
      input: '',
      num: 1,
      numUP: 1,
      share_imgs: ''
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    getlist() {
      this.loading = true
      shareList(1, 10).then(res => {
        console.log(res.data.list)
        this.list = res.data.list
        this.loading = false
      })
    },
    // 添加文件
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleChange(value) {
      // console.log(value);
    },
    // 删除
    share_remove(id) {
      // console.log(id);
      this.loading = true
      shareRemove(id).then(res => {
        console.log(res)
        if (res.code == 200) {
          shareList(1, 10).then(res => {
            // console.log(res.data.list);
            this.list = res.data.list
          })
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.loading = false
        }
      })
    },
    // 添加
    share_add() {
      if (this.share_imgs != '') {
        this.loading = true
        this.dialogVisible = false
        // console.log(this.share_imgs);
        shareAdd(this.share_imgs, this.num).then(res => {
          // console.log(res);
          shareList(1, 10).then(res => {
            // console.log(res.data.list);
            this.list = res.data.list
            this.loading = false
          })
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        })
        this.share_imgs = ''
      } else {
        this.$message.error('图片未上传')
      }
    },
    // 头像
    // 上传头像前
    beforeUpload() {
      this.loadingA = true
    },
    // 上传完成后（无论成功、失败都调用）
    uploadChange() {
      this.loadingA = false
    },
    // 上传完头像调用
    uploaded(res) {
      if (res.code === 200) {
        // 把上传之后的路径保存到表单中
        this.share_imgs = res.data.path
      }
    }
  }
}
</script>

<style lang="scss">
.share_img {
  width: 110px;
  height: 90px;
}
.share_qwe {
  // background: red;
  .share_qwe_1 {
    margin-top: 20px;
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      width: 60px;
    }
  }
  .el-input__inner {
    // width: 200px !important;
  }
  .share_imgs {
    width: 100px;
    height: 100px;
  }
}
</style>
